<template>
	<view class="login-wrap">
		<image class="loginpic" src="../../static/login_top.png" mode="scaleToFill"></image>
		<view class="login-account">
			<image src="../../static/login_account.png" mode="scaleToFill"></image>
			<input class="inputform" placeholder="请输入账号" placeholder-style="color: #ABABAB; font-size: 30rpx; line-height: 30rpx;" type="text" v-model="account" />
		</view>

		<view class="login-pass">
			<image src="../../static/login_password.png" mode="scaleToFill"></image>
			<input class="inputform1" placeholder="请输入密码" placeholder-style="color: #ABABAB; font-size: 30rpx; line-height: 30rpx;" type="text" :password="true" v-model="password" />
		</view>

		<view class="kefu" @click="contact=true">联系客服</view>

		<view class="loginbtn" @click="login">立即登录</view>
		<!-- 客服弹窗 -->
		<u-popup v-model="contact" mode="center" borderRadius="30" :zoom="false">
			<view class="kefupop">
				<image class="closepic" src="../../static/close_ic.png" mode="aspectFill" @click="contact = false"></image>
				<view class="zixun">客服咨询</view>
				<view class="dianhua" @click="copyTel">客服电话：{{system ? (system.telephone ? system.telephone : '') : ''}}</view>
				<image class="erweima" :src="baseUrl+system.or_code" mode="aspectFill" @click="preCustomerService"></image>
				<view class="kefuweixin">客服微信二维码</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			baseUrl: this.$api.baseUrl,
			account: '',
			password: '',
			contact: false,
			system: {}
		}
	},
	onLoad() {
		if (this.$auth.isLogin()) {
			uni.reLaunch({
				url: '../index/index'
			})
		}
	},
	onShow() {
		this.getSystem()
	},
	methods: {
		forget() {
			uni.navigateTo({
				url: 'forget'
			})
		},
		// 登录逻辑
		login() {
			let that = this
			if (!that.account) {
				uni.showToast({
					title: '请输入账号',
					icon: 'none'
				})
				return
			}
			if (!that.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return
			}

			uni.request({
				url: `${that.$api.baseUrl}${that.$api.login}`,
				method: 'POST',
				header: {
					'authtoken': that.$auth.token(that.$api.login, that.account, that.password)
				},
				success(res) {
					if (res.statusCode == 200 && res.data.code == 1) {
						that.$auth.logIn(that.account, that.password, res.data.data)
						uni.reLaunch({
							url: '../index/index'
						})
					} else {
						uni.showToast({
							title: res.data.msg || res.errMsg || '登录失败，请重试',
							icon: 'none',
							mask: true
						})
					}
				},
				fail(fail) {
					that.$auth.logOut()
					uni.showToast({
						title: fail.errMsg || '登录失败，请重试',
						icon: 'none',
						mask: true
					})
				}
			})
		},
		// 获取客服电话和二维码
		getSystem() {
			let that = this;
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.customer}`,
				method: 'POST',
				success(res) {
					if (res.statusCode == 200 && res.data.code == 1) {
						that.system = res?.data?.data
						console.log(that.system, 'that.system');
					} else {
						uni.showToast({
							title: res.data.msg || res.errMsg || '获取信息失败',
							icon: 'none',
							mask: true
						})
					}
				},
				fail(fail) {
					uni.showToast({
						title: fail.errMsg || '获取信息失败',
						icon: 'none',
						mask: true
					})
				}
			})
		},
		// 复制号码
		copyTel() {
			uni.setClipboardData({
				data: this.system.telephone,
				showToast: true
			})
		},
		preCustomerService() {
			let that = this;
			that.contactCustomerService = false;
			uni.previewImage({
				current: 0,
				urls: [`${that.$api.baseUrl}${that.system.or_code}`]
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.login-wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 50rpx;
	.loginpic{
		width: 374rpx;
		height: 267rpx;
		margin-top: 140rpx;
	}
	.login-account{
		width: 590rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #DCDCDC;
		padding: 30rpx 0 30rpx 0;
		margin-top: 80rpx;
		image{
			width: 31rpx;
			height: 34rpx;
		}
		.inputform{
			margin-left: 20rpx;
			color: #333333;
			font-size: 30rpx;
			line-height: 30rpx;
		}
	}
	.login-pass{
		width: 590rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #DCDCDC;
		padding: 30rpx 0 30rpx 0;
		margin-top: 50rpx;
		image{
			width: 31rpx;
			height: 34rpx;
		}
		.inputform1{
			margin-left: 20rpx;
			color: #333333;
			font-size: 30rpx;
			line-height: 30rpx;
		}
	}
	.kefu{
		font-size: 26rpx;
		color: #A2A2A2;
		line-height: 26rpx;
		width: 590rpx;
		padding: 30rpx 57rpx 30rpx 0;
		text-align: right;
	}
	.loginbtn{
		width: 590rpx;
		height: 90rpx;
		background: linear-gradient(0deg, #615CED, #8286F2);
		box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(97, 92, 237, 0.2);
		border-radius: 45rpx;
		font-size: 36rpx;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
		margin-top: 70rpx;
	}
	.kefupop{
		width: 550rpx;
		height: 680rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.closepic{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
		.zixun{
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			line-height: 34rpx;
			padding-top: 95rpx;
		}
		.dianhua{
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			padding-top: 33rpx;
		}
		.erweima{
			width: 300rpx;
			height: 300rpx;
			margin-top: 34rpx;
		}
		.kefuweixin{
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			line-height: 34rpx;
			padding-top: 60rpx;
		}
	}
}
</style>
